<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园原创</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="icon" href="img/title.ico" type="img/x-ico" />
    <link rel="stylesheet" href="jquery.zySlide.css">
    <link rel="stylesheet" href="novelmain.css">
</head>

<body>
    <div class="layui-container">
        <!--头部查询区域-->
        <div class="layui-row">
            <div class="layui-col-md3 box"><img src="img/logo.png"></div>
            <div class="layui-col-md6 box">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <input class="searchbox" type="text" placeholder="作者/书籍">
                        <span><button class="searchbtn" lay-submit lay-filter="formDemo">搜索</button></span>
                    </div>
                </form>
            </div>
            <div class="layui-col-md3">
                <div class="guide">
                    <a href="#"><img src="img/xiezuo.ico">我要当作家</a>
                </div>
            </div>
        </div>
        <!--图片-->
        <div class="layui-row" style="margin-top:2%">
            <div class="layui-col-md12">
                <img src="img/headertop.jpg" style="width:100%">
            </div>
        </div>
        <hr style="height: 3px;">
        <!--分类及轮播区域-->
        <div class="layui-row">
            <!--分类-->
            <div class="layui-col-md2">
                <div style="margin-bottom:5px;text-align: center">
                    <strong class="underline">作品分类</strong>
                </div>
                <table class="table1" style="margin: auto">
                    <tr>
                        <td><a href="#">玄幻</a></td>
                        <td>
                            <a href="#">仙侠</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">奇幻</a>
                        </td>
                        <td>
                            <a href="#">武侠</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">都市</a>
                        </td>
                        <td>
                            <a href="#">历史</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">军事</a>
                        </td>
                        <td>
                            <a href="#">科幻</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">灵异</a>
                        </td>
                        <td>
                            <a href="#">体育</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">言情</a>
                        </td>
                        <td>
                            <a href="#">现实</a>
                        </td>
                    </tr>
                </table>
            </div>
            <!--轮播-->
            <div class="layui-col-md10 layui-col-xs10">
                <div style="margin-bottom:5px;text-align: center"><strong class="underline">热门推荐</strong></div>
                <div id="Slide1" class="zy-Slide">
                    <!--prev:元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。-->
                    <section>上</section>
                    <section>下</section>
                    <ul>
                        <!--alt + shift : 可以创建一个矩形选择区域-->
                        <li>
                            <a href="#"><img src="img/doupocangqiong.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/douluodalu.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/dazhuzai.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/changshengjie.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/zhetian.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/wudong.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/shenmu.jpg" /></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <hr style="height: 3px;">
        <div class="layui-row layui-col-space10">
            <!--封面推荐区域-->
            <div class=" layui-col-md9">
                <div style="margin-bottom:5px "><strong class="underline"
                        style="margin-left: 6%;margin-top: 10px;">封面推荐</strong>
                </div><br>
                <div class="layui-row" style="border:solid 1px #dddddd">
                    <!--弹性盒子-->
                    <div class="boxnovel" title="大主宰">
                        <div class="novelimg">
                            <a href="#"><img src="img/dazhuzai.jpg" id="bookimg"></a>
                        </div>
                        <div class="novelname"><a href="novel.do?novelid=${obj.novelid}">大主宰</a></div>
                        <div class="novelauthor"><a href="#" style="color:gray">辰东</a></div>
                    </div>
                    
                </div>
            </div>
            <!--人气作者排行-->
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <strong class="underline" style="margin-left:-160px;margin-top: 10px;">人气作家排行</strong>
                    </div>
                    <div class="layui-card-body" style="border:solid 1px #dddddd">
                        <li>
                            <div class="layui-row">
                                <div class="layui-col-md6 layui-col-xs-offset1" style="text-align: left;">
                                    <h3><b class="layui-bg-red">No.1</b></h3>
                                    <h3><b>唐家三少</b></h3>
                                    <h4><b style="color: red">人气最高</b></h4>
                                </div>
                                <div class="layui-col-md5">
                                    <img src="img/tiancantudou.jpg" style="width: 70%; height:90px">
                                </div>
                            </div>
                        </li>
                        <hr>
                        <li>
                            <div class="layui-row">
                                <div class="layui-col-md1 layui-col-xs-offset1">
                                    <h3 class="layui-bg-green"><b>2</b></h3>
                                </div>
                                <div class="layui-col-md9">
                                    <b style="text-align: left;"> 天蚕土豆</b>
                                    <span style="float: right;">193455</span>
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <!--新书推荐区域-->
            <div class=" layui-col-md9">
                <div style="margin-bottom:5px "><strong class="underline"
                        style="margin-left: 6%;margin-top: 10px;">新书推荐</strong>
                </div><br>
                <div class="layui-row" style="border:solid 1px #dddddd">
                    
                    <!--弹性盒子-->
                    <div class="boxnovel" title="大主宰">
                        <div class="novelimg">
                            <a href="#"><img src="img/dazhuzai.jpg" id="bookimg"></a>
                        </div>
                        <div class="novelname"><a href="novel.do?novelid=${obj.novelid}">大主宰</a></div>
                        <div class="novelauthor">辰东</div>
                    </div>
                </div>
            </div>
            <!--人气小说排行-->
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <strong class="underline" style="margin-left:-160px;margin-top: 10px;">人气小说排行</strong>
                    </div>
                    <div class="layui-card-body" style="border:solid 1px #dddddd">
                        <li>
                            <div class="layui-row">
                                <div class="layui-col-md6 layui-col-xs-offset1" style="text-align: left;">
                                    <h3><b class="layui-bg-red">No.1</b></h3>
                                    <h3><b>唐家三少</b></h3>
                                    <h4><b style="color: red">人气最高</b></h4>
                                </div>
                                <div class="layui-col-md5">
                                    <img src="img/tiancantudou.jpg" style="width: 70%; height:90px">
                                </div>
                            </div>
                        </li>
                        <hr>
                        <li>
                            <div class="layui-row">
                                <div class="layui-col-md1 layui-col-xs-offset1">
                                    <h3 class="layui-bg-green"><b>2</b></h3>
                                </div>
                                <div class="layui-col-md9">
                                    <b style="text-align: left;"> 天蚕土豆</b>
                                    <span style="float: right;">193455</span>
                                </div>
                            </div>
                        </li>              
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--最近更新-->
    <div class="layui-row" style="margin-top:3%">
        <div style="margin-bottom:5px "><strong class="underline"
                style="margin-left: 6%;margin-top: 10px;">最近更新</strong></div>
        <div class="layui-row">
            <div class="layui-md12">
                <table style="width:100%;margin:auto;text-align: center">
                    <tr>
                        <td><a href="">[异界玄幻]</a></td>
                        <td><a href="">《完美世界》</a></td>
                        <td><a href="">第一章 朝气蓬勃</a></td>
                        <td><a href="">辰东</a></td>
                        <td>2014-6-3 09:15:32.3</td>
                    </tr>
                    <tr>
                        <td><a href="">[异界玄幻]</a></td>
                        <td><a href="">《完美世界》</a></td>
                        <td><a href="">第一章 朝气蓬勃</a></td>
                        <td><a href="">辰东</a></td>
                        <td>2014-6-3 09:15:32.3</td>
                    </tr>
                    <tr>
                        <td><a href="">[异界玄幻]</a></td>
                        <td><a href="">《完美世界》</a></td>
                        <td><a href="">第一章 朝气蓬勃</a></td>
                        <td><a href="">辰东</a></td>
                        <td>2014-6-3 09:15:32.3</td>
                    </tr>
                    <tr>
                        <td><a href="">[异界玄幻]</a></td>
                        <td><a href="">《完美世界》</a></td>
                        <td><a href="">第一章 朝气蓬勃</a></td>
                        <td><a href="">辰东</a></td>
                        <td>2014-6-3 09:15:32.3</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    </div>

</body>
<script src="layui/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.zySlide.js"></script>
<script src="js/index.js"></script>

</html>